<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 情况1, 方法本身不需要传递参数, 调用方法时的小括号可以省略 -->
    <button @click="clickBtn1()">按钮1</button>
    <button @click="clickBtn1">按钮1</button>

    <!-- 情况2, 方法本身需要传递一个参数, 调用方法的时候没有省略小括号, 也没有传入参数, 那么这个形参就为undefined -->
    <button @click="clickBtn2('abc')">按钮2</button>
    <!-- 这里就是没有省略小括号, 也没有传入参数, 那么就是undefined -->
    <button @click="clickBtn2()">按钮3</button>
    <!-- 如果省略了小括号, 但是这个方法本事是需要一个参数传入的, 那么Vue就会默认将浏览器生成的事件对象当作参数传入 -->
    <button @click="clickBtn2">按钮4</button>

    <!-- 情况3, 如果在定义方法的时候, 既需要传入一个参数, 又需要传入浏览器产生的event对象 -->
    <!-- 那么要获取这个这个event对象, 就用 $event -->
    <!-- 传入参数的时候注意引号的问题, 有引号表示字符串, 没引号代表变量, $event代表浏览器产生的event对象 -->
    <button @click="clickBtn3('abc', $event)">按钮5</button>

  </div>
  <script>
    const app = new Vue({
      el: "#app",
      methods: {
        clickBtn1() {
          console.log("按钮1被按了");
        },
        clickBtn2(event) {
          console.log(event);
        },
        clickBtn3(abc, event) {
          console.log(abc, event);
        }
      }
    })
  </script>
</body>

</html>